<template>
  <div class="home-page" :class="{active:active}">
    <div class="home-menu-left">
      <div class="logo">
        <!-- <i v-if="_SERVER==119||_SERVER==139||_SERVER==120" class="iconfont"
           :class="_SERVEROBJ[active?'miniLogo':'logo']"></i> -->
        <img :src="_SERVEROBJ[active?'miniLogo':'logo']" alt="">
      </div>

      <div @click="miniNav" class="take-back">
        <Icon :type="!active?'chevron-left':'chevron-right'"></Icon>
      </div>
      <VuePerfectScrollbar class="home-nav">


        <!-- `````````````````````````````````````````````````````````` -->

        <Menu v-if="!active" @on-select="openPage" @on-open-change="onOpenChange" :active-name="activeName"
              theme="dark" width="auto"
              :open-names="openNames">
          <template>
            <Submenu name="releasePolicyCatalog" key="/releasePolicyCatalog">
              <template slot="title">
                <i class="nav-title-icon iconfont icon-fabu"></i>
                <span>政策</span>
              </template>
              <MenuItem  v-if="this.$store.state.userMsg.admin == true"
                name="releasePolicy"
                key="releasePolicy">
                <span key="releasePolicy" class="nav-mark"></span>
                <span key="releasePolicy">发布政策</span>
              </MenuItem>
              <MenuItem
                name="onlinePolicy"
                key="onlinePolicy">
                <span key="onlinePolicy" class="nav-mark"></span>
                <span key="onlinePolicy">在线政策</span>
              </MenuItem>
            </Submenu>
          </template>
          <template>
            <Submenu  v-if="this.$store.state.userMsg.admin == true || this.$store.state.userMsg.sectionAdmin == true || this.$store.state.userMsg.admin1 == true" name="onlineApplyCatalogs" key="/onlineApplyCatalogs">
              <template slot="title">
                <i class="nav-title-icon iconfont icon-xianshangshenqing-"></i>
                <span>线上申请</span>
              </template>
              <MenuItem
                name="onlineApply"
                key="onlineApply">
                <span key="onlineApply" class="nav-mark"></span>
                <span key="onlineApply">查看线上申请</span>
              </MenuItem>
              <!-- <MenuItem
                v-if="_SERVER == 123 || _SERVER == 203"
                name="otherOnlineApply"
                key="otherOnlineApply">
                <span key="otherOnlineApply" class="nav-mark"></span>
                <span key="otherOnlineApply">查看事业线上申请</span>
              </MenuItem> -->
              <MenuItem
                name="appointDate"
                key="appointDate">
                <span key="appointDate" class="nav-mark"></span>
                <span key="appointDate">预约时间表</span>
              </MenuItem>
            </Submenu>
          </template>
          <template>
            <Submenu name="offlineChk" key="/offlineChk">
              <template slot="title">
                <i class="nav-title-icon iconfont icon-xianxiashenhe-"></i>
                <span>线下审核</span>
              </template>
              <MenuItem
                name="myChk"
                key="myChk">
                <span key="myChk" class="nav-mark"></span>
                <span key="myChk">我的审核</span>
              </MenuItem>
              <MenuItem
                name="monitorAllChks"
                key="monitorAllChks">
                <span key="monitorAllChks" class="nav-mark"></span>
                <span key="monitorAllChks">监控所有审核</span>
              </MenuItem>
              <MenuItem
                name="reviewProcess"
                key="reviewProcess">
                <span key="reviewProcess" class="nav-mark"></span>
                <span key="reviewProcess">审核流程</span>
              </MenuItem>
              <MenuItem v-if="this.$store.state.userMsg.admin == true"
                name="organizationAuditAcc"
                key="organizationAuditAcc">
                <span key="organizationAuditAcc" class="nav-mark"></span>
                <span key="organizationAuditAcc">组织架构及审核帐号</span>
              </MenuItem>
            </Submenu>
          </template>
          <template>
            <MenuItem class="setting-page"
                      name="done"
                      key="/done">
              <span class="nav-mark" key="/done"></span>
              <i class="nav-title-icon iconfont icon-wancheng-" key="/done"></i>
              <span key="/done">已完结</span>
            </MenuItem>
          </template>
          <template>
            <Submenu v-if="this.$store.state.userMsg.admin == true"  name="platformManagement" key="/platformManagement">
              <template slot="title">
                <i class="nav-title-icon iconfont icon-pingtaiguanli-"></i>
                <span>平台管理</span>
              </template>
              <MenuItem
                name="notification"
                key="notification">
                <span key="notification" class="nav-mark"></span>
                <span key="notification">通知</span>
              </MenuItem>
              <MenuItem
                name="assist"
                key="assist">
                <span key="assist" class="nav-mark"></span>
                <span key="assist">帮扶</span>
              </MenuItem>
              <MenuItem
                name="policymatch"
                key="policymatch">
                <span key="policymatch" class="nav-mark"></span>
                <span key="policymatch">快速政策匹配</span>
              </MenuItem>
            </Submenu>
          </template>
          <template>
            <Submenu v-if="this.$store.state.userMsg.admin == true || this.$store.state.userMsg.admin1 == true"  name="checkInformation" key="/checkInformation">
              <template slot="title">
                <i class="nav-title-icon iconfont icon-zhuanxiezhengce-"></i>
                <span>企业审核</span>
              </template>
              <MenuItem
                name="approval"
                key="approval">
                <span key="approval" class="nav-mark"></span>
                <span key="approval">注册审核</span>
              </MenuItem>
              <MenuItem
                name="checkInfo"
                key="checkInfo">
                <span key="checkInfo" class="nav-mark"></span>
                <span key="checkInfo">审核记录</span>
              </MenuItem>
            </Submenu>
          </template>
          <template>
            <MenuItem class="setting-page"
                      name="setting"
                      key="/setting">
              <span class="nav-mark" key="/setting"></span>
              <i class="nav-title-icon iconfont icon-shezhi-" key="/setting"></i>
              <span key="/setting">设置</span>
            </MenuItem>
          </template>
        </Menu>
        <!-- ```````````````````````````````````````````````````````````````` -->
        <ul v-else class="mini-menu">
          <template v-for="(item,index) in menuList">
            <li v-if="item.children.length>1 && accountsAdmin(item.admin)"
                :class="{active:item.name == catalogName}"
                class="mini-menu-item"
                :key="index">
              <span class="nav-mark"></span>
              <i class="nav-title-icon iconfont" :class="item.icon"></i>
              <div class="mini-menu-list">
                <div class="title">{{item.title}}</div>
                <!-- <ul v-if="_SERVER == 123 || _SERVER == 203">
                  <li
                    v-if="accountsAdmin(child.admin) && (!child.server || !child.server.includes(_SERVER))"
                    v-for="child in item.children"
                    :key="child.name"
                    @click="openPage(child.name)"
                    :class="{active: activeName == child.name}">
                    <span :key="child.name" class="nav-mark"></span>
                    <span :key="child.name">{{child.title}}</span>
                  </li>
                </ul> -->
                <ul>
                  <li
                    v-if="accountsAdmin(child.admin) && (!child.server || !child.server.includes(_SERVER)) && child.name == 'onlineApply'"
                    v-for="child in item.children"
                    :key="child.name"
                    @click="openPage(child.name)"
                    :class="{active: activeName == child.name}">
                    <span :key="child.name" class="nav-mark"></span>
                    <span :key="child.name">查看线上申请</span>
                  </li>
                  <li
                    v-if="accountsAdmin(child.admin) && (!child.server || !child.server.includes(_SERVER)) && child.name != 'otherOnlineApply' && child.name != 'onlineApply'"
                    v-for="child in item.children"
                    :key="child.name"
                    @click="openPage(child.name)"
                    :class="{active: activeName == child.name}">
                    <span :key="child.name" class="nav-mark"></span>
                    <span :key="child.name">{{child.title}}</span>
                  </li>
                </ul>
              </div>
            </li>
            <li v-if="item.children.length<=1 && accountsAdmin(item.admin)" @click="openPage(item.name)" :key="index"
                :class="[{active:item.name == catalogName},'mini-menu-item setting-page']">
              <span class="nav-mark"></span>
              <i class="nav-title-icon iconfont" :key="item.name" :class="item.icon"></i>
              <div class="mini-menu-list">
                <div :key="item.name" class="title">{{item.title}}</div>
              </div>
            </li>
          </template>
        </ul>

      </VuePerfectScrollbar>
    </div>
    <div class="home-menu-right">
      <div class="home-header">
        <span class="user" v-if="userMsg">{{userMsg.name||userMsg.loginName}}&nbsp;&nbsp;</span>
        <i @click="logout" class="logout iconfont icon-tuichu"></i>
      </div>
      <div class="home-content">
        <!--<transition name="fade">-->
        <router-view></router-view>
        <!--</transition>-->
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import "./home.styl";

  export default {
    name    : "home",
    data() {
      return {
        active    : false,
        activeName: "",
        logo      : "./static/logo.png",
        miniLogo  : "./static/mini-logo.png",
        userMsg   : {},
        openNames : [],
        opened    : []
      };
    },
    computed: {
      isAdmin() {
        return this.$store.state.userMsg && this.$store.state.userMsg.admin;
      },
      notAdmin() {
        return this.$store.state.userMsg && !this.$store.state.userMsg.admin;
      },
      menuList() {
        return this.$store.state.menuList;
      },
      catalogName() {
        if (this.activeName == "setting") {
          return this.activeName;
        } else {
          for (let i = 0, a; (a = this.menuList[i++]);) {
            for (let j = 0, b; (b = a.children[j++]);) {
              if (this.activeName == b.name) {
                return a.name;
              }
            }
          }
        }
      }
    },
    methods : {
      accountsAdmin(admin) {
        if (this.$store.state.userMsg) {
          let $admin = this.$store.state.userMsg.admin;
          if ($admin || (!$admin && !admin)) {
            return true;
          }
        }
      },
      miniNav() {
        this.active = !this.active;
        sessionStorage.setItem("miniNav", JSON.stringify(this.active));
      },
      logout() {
        this.ajaxData(
          {
            type: "post",
            url : `/user/logout`
          },
          (res, all) => {
            if (all.code == 0) {
              sessionStorage.clear();
              this.$router.push({path: "/login"});
            }
          }
        );
      },
      onOpenChange(names) {
        sessionStorage.setItem("openCatalog", JSON.stringify(names));
        this.openNames = names;
      },
      openPage(page) {
        sessionStorage.setItem("navCatalog", page);
        this.activeName = page;
        this.$router.push({
          name: page
        });
      }
    },
    created() {
      let navCatalog  = sessionStorage.getItem("navCatalog");
      let openCatalog = sessionStorage.getItem("openCatalog");
      let miniNav     = sessionStorage.getItem("miniNav");
      if (!navCatalog) {
        for (let menu of this.menuList) {
          if (this.isAdmin) {
            navCatalog = menu.children[0].name;
            break;
          } else if (this.notAdmin && !menu.admin) {
            for (let v of menu.children) {
              if (!v.admin) {
                navCatalog = v.name;
                break;
              }
            }
            break;
          }
        }
        this.openPage(navCatalog);
      } else {
        this.activeName = navCatalog;
      }
      if (!openCatalog) {
        for (let menu of this.menuList) {
          if (this.isAdmin) {
            this.openNames = [menu.name];
            break;
          } else if (this.notAdmin && !menu.admin) {
            this.openNames = [menu.name];
            break;
          }
        }
        sessionStorage.setItem("openCatalog", JSON.stringify(this.openNames));
      } else {
        this.openNames = JSON.parse(openCatalog);
      }
      if (!miniNav) {
        sessionStorage.setItem("miniNav", JSON.stringify(this.active));
      } else {
        this.active = JSON.parse(miniNav);
      }

      if (!this.$store.state.userMsg) {
        sessionStorage.clear();
        this.$router.push({path: "/login"});
      } else {
        this.userMsg = this.$store.state.userMsg;
      }
    },
    mounted() {}
  };
</script>

<style>
  .home-page a {
    /*text-decoration : none;*/
    /*color           : #aaa;*/
  }

  .home-page .ivu-menu-submenu-title {
    font-size  : 16px;
    text-align : left;
  }

  .home-page.active .home-nav {
    overflow : visible !important;
  }

  .home-nav .ivu-menu-vertical .ivu-menu-item {
    background-color : #3f3f3f;
  }

  .home-nav .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item,
  .home-nav .ivu-menu-dark.ivu-menu-vertical {
    background-color : #393939;
  }

  .home-nav .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item,
  .home-nav .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title {
    text-align : left !important;
    color      : #9399b0;
  }

  .home-nav .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item:hover,
  .home-nav .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title:hover,
  .home-nav
  .ivu-menu-dark.ivu-menu-vertical
  .ivu-menu-opened
  .ivu-menu-submenu-title {
    background-color : #4c4c4c !important;
  }

  .home-nav .ivu-menu-dark.ivu-menu-vertical .setting-page {
    position : relative;
  }

  .home-nav .ivu-menu-dark.ivu-menu-vertical .setting-page,
  .home-nav
  .ivu-menu-dark.ivu-menu-vertical
  .ivu-menu-item-active
  .ivu-menu-submenu-title,
  .home-nav
  .ivu-menu-dark.ivu-menu-vertical
  .ivu-menu-opened
  .ivu-menu-submenu-title,
  .home-nav .ivu-menu.ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title {
    height      : 60px !important;
    line-height : 60px !important;
    font-size   : 16px !important;
  }

  .home-nav .ivu-menu-vertical .ivu-menu-item,
  .home-nav .ivu-menu-vertical .ivu-menu-submenu-title {
    padding-top    : 0;
    padding-bottom : 0;
    height         : 40px;
    line-height    : 40px;
    text-align     : left;
  }

  .home-nav .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title {
    position     : relative;
    padding-left : 78px;
  }

  .home-nav .ivu-menu-vertical .ivu-menu-submenu-title-icon {
    top : 19px;
  }

  .home-nav .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item {
    padding-left : 78px !important;
    font-size    : 14px;
  }

  .home-nav .ivu-menu-dark.ivu-menu-vertical .setting-page.ivu-menu-item-selected,
  .home-nav .ivu-menu-dark.ivu-menu-vertical .setting-page.ivu-menu-item:hover,
  .home-nav
  .ivu-menu-dark.ivu-menu-vertical
  .ivu-menu-submenu
  .ivu-menu-item:hover,
  .home-nav
  .ivu-menu-dark.ivu-menu-vertical
  .ivu-menu-submenu
  .ivu-menu-item-active,
  .home-nav
  .ivu-menu-dark.ivu-menu-vertical
  .ivu-menu-submenu
  .ivu-menu-item-active:hover {
    background-color : #7f7f7f !important;
    padding-left     : 78px;
    font-size        : 14px;
    color            : #fff;
  }

  .ivu-menu-dark.ivu-menu-vertical
  .ivu-menu-submenu
  .ivu-menu-item-active
  .nav-mark,
  .home-nav .ivu-menu-vertical .setting-page.ivu-menu-item-active .nav-mark {
    display : block;
  }

  .home-nav
  .ivu-menu-dark.ivu-menu-vertical
  .ivu-menu-item-active:not(.ivu-menu-submenu),
  .ivu-menu-dark.ivu-menu-vertical
  .ivu-menu-submenu-title-active:not(.ivu-menu-submenu) {
    border : 0;
  }

  .inform span:nth-child(1),
  .inform span:nth-child(2),
  .inform span:nth-child(3) {
    cursor : pointer;
  }

  .home-menu-left .ivu-menu-vertical .ivu-menu-item,
  .home-menu-left .ivu-menu-vertical .ivu-menu-submenu-title {
    transition : all 0.1s ease-in-out;
  }

  .home-page .home-menu-left .home-nav .setting-page:hover .nav-title-icon,
  .home-page .home-menu-left .home-nav .setting-page:hover .nav-title-icon + span,
  .home-page
  .home-menu-left
  .home-nav
  .setting-page.ivu-menu-item-active
  .nav-title-icon,
  .home-page
  .home-menu-left
  .home-nav
  .setting-page.ivu-menu-item-active
  .nav-title-icon
  + span {
    color : #fff;
  }

  .home-nav .ivu-menu-item-active .ivu-menu-submenu-title > * {
    color : #fff !important;
  }

  /* 完美滚动条颜色 */
  .ps > .ps__scrollbar-x-rail > .ps__scrollbar-x,
  .ps > .ps__scrollbar-y-rail > .ps__scrollbar-y {
    background-color : rgba(81, 81, 81, 0.5);
  }
</style>
